<template>
  <el-dialog title="借阅列表" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="60%">
    <div class="dialog_conwrap mb-20">
      <div class="applycartlist">
        <div class="applyTitle mb-10">
          选择预还书日期：
          <el-date-picker
                  v-model="value1"
                  type="date"
                  :picker-options="pickerOptions1"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <p class="ml-10 applyinfo">（请在此时间之前归还图书室）</p>
        </div>
        <el-table
                ref="multipleTable"
                :data="arryList"
                :stripe="tableStripe"
                :border="tableBorder"
                tooltip-effect="dark"
                style="width: 100%"
                height="400"
                header-cell-class-name="table-text-c"
                cell-class-name="table-text-c">
          <el-table-column
                  prop="name"
                  label="图书名称"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="editor"
                  label="作者"
                  align="center">
          </el-table-column>
          <el-table-column
              prop="position"
              label="位置"
              width="80"
              align="center">
          </el-table-column>
          <el-table-column
                  prop="cat_name"
                  label="类目"
                  width="120"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="read_number"
                  label="可借库存"
                  width="80"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="apply"
                  label="申请数量"
                  width="120"
                  align="center">
            <template slot-scope="scope">
              <div class="applyBtnbox">
              <span class="el-icon-remove-outline left-box"
                    :class="arryList[scope.$index].applynumber==1?'noneClick':'btnapply'"
                    @click="richbox(1,scope.$index)"></span>
                <el-input auto-complete="off" placeholder="填写申请数量" v-model="arryList[scope.$index].applynumber"
                          @change="numChange(scope.$index)"></el-input>
                <span class="el-icon-circle-plus-outline right-box" :class="arryList[scope.$index].applynumber==arryList[scope.$index].read_number?'noneClick':'btnapply'" @click="richbox(2,scope.$index)"></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  prop="read_number"
                  label="操作"
                  width="100"
                  align="center">
            <template slot-scope="scope" align="center">
              <el-button type="danger" size="small" @click="detelFn(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false" size="small">返回再选择</el-button>
      <el-button type="primary" size="small" @click="formCheck">确认申请</el-button>
    </span>
  </el-dialog>
</template>
<script>

  export default {
    name: 'Dialog',
    props: ['visible', 'eidtOption'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
        if (this.visible) {
          console.log('this.eidtOption:', this.eidtOption)
          for (let i in this.eidtOption) {
            this.arryList.push(this.eidtOption[i])
          }
        } else {
          this.arryList = []
          this.value1 = ''
        }
      }
    },
    data () {
      return {
        dialogVisible: this.visible,
        tableStripe: true, // 是否斑马栏
        tableBorder: true, // 单元格右边边框
        value1: '',
        arryList: [],
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() < Date.now() //  - 8.64e7 减去就是不包含今天的
          }
        }
      }
    },
    created () {
      // this.classList()
    },
    methods: {
      formCheck () {
        this.$emit('submitApplyBook', {time: this.value1, option: this.arryList})
      },
      detelFn (index) {
        console.log('选择当前的id：', index)
        this.$emit('detelBook', this.arryList[index].id)
        this.arryList.splice(index, 1)
      },
      richbox (option, index) {
        // option 1 减法 2 加法 number 库存 num 当前数量
        if (option === 1) {
          if (this.arryList[index].applynumber > 1) {
            this.arryList[index].applynumber--
          }
        } else {
          if (this.arryList[index].applynumber < this.arryList[index].read_number) {
            this.arryList[index].applynumber++
          } else {
            // this.$message.error('库存不')
          }
        }
        this.arryList = JSON.parse(JSON.stringify(this.arryList))
      },
      numChange (index) {
        let re = /^[0-9]+.?[0-9]*/// 判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
        if (!re.test(this.arryList[index].applynumber)) {
          this.arryList[index].applynumber = 1
          return
        }
        if (this.arryList[index].applynumber > this.arryList[index].read_number) {
          this.$message.error('库存不足')
          this.arryList[index].applynumber = this.arryList[index].read_number
          return
        }
        this.$emit('changeApply', this.arryList)
      }
    }
  }
</script>

